<template>
	<div class="words-item-list yuwenPinyiWriteWords bqdy">
		<template v-for="(item, index) in props.data" :key="index">
			<div class="words-item">
				<div v-for="(w, index) in item.word" :key="index" class="word" :class="{'target': item.index === index}">
					<Words :text="w" :size="size" :border-draw="false" />
				</div>
				<div class="wrods-inner">
					<span class="margin-left-8">(</span>
					<span class="margin-left-8">{{ item.pinyi }}</span>
					<div class="pinyi">
						<span>{{ showResult(index) }}</span>
					</div>)
				</div>
			</div>
		</template>
	</div> 
</template>

<script setup>
import { ref } from "vue"
import Words from "@/components/words/index.vue"
import Props from "../props.js"
const props = defineProps({
	...Props,
	size: {
		type: Number,
		default: 6
	}
})
const emit = defineEmits(['answer'])
const showResult = (index) => {
	const result = props.result?.[index]
	return result ? props.result?.[index] || '' : ''
}
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.words-item-list {
	display: flex;
	flex-wrap: wrap;
	.words-item {
		margin-bottom: 2rem;
		width: 50%;
		font-size: 1.6rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.word { 
		position: relative;
		&.target::after {
			position: absolute;
			content: "";
			margin: 1rem auto 0;
			width: 0.4rem;
			height: 0.4rem;
			border-radius: 1rem;
			background-color: #000;
			left: 50%;
			margin-left: -0.2rem;
			bottom: -0.6rem;
		}
	}
		
	.is-active {
		background-color: $gray-ligh-7;
		border-radius: 0.4rem;
	}
	.pinyi {
		width: 5rem;
		padding: 0 0.4rem 0 0.2rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		input {
			width: 100%;
			height: 100%;
			border: none;
			background: none;
			padding: 0;
			margin: 0;
			outline: none;
		}
	}
}
.wrods-inner {
	display: flex;
	align-items: center;
	margin-top: -1rem;
}
</style>